<template>
    <div>
        <Modal
                v-model="modal"
                title="添加/编辑角色"
                :closable="false"
                :mask-closable="false">
            <Form
                    ref="formValidate"
                    :model="formItem"
                    :rules="ruleValidate"
                    :label-width="80">
                <FormItem label="姓名" prop="name">
                    <Input v-model="formItem.name" placeholder="姓名"/>
                </FormItem>
                <FormItem label="手机号" prop="phone">
                    <Input v-model="formItem.phone" placeholder="手机号"/>
                </FormItem>
                <FormItem label="角色" prop="roleIds">
                    <Select v-model="formItem.roleIds" multiple>
                        <Option v-for="item in roleList" :value="item.id" :key="item.id">{{ item.des}}</Option>
                    </Select>
                </FormItem>
            </Form>
            <div slot="footer">
                <Button type="text" size="large" @click="cancel">取消</Button>
                <Button type="primary" size="large" @click="submit('formValidate')">确定</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
    export default {
        name: "UserForm",
        data() {
            return {
                roleList: [],
                formItem: {
                    id: '',
                    phone: '',
                    name: '',
                    roleIds: []
                },
                ruleValidate: {
                    name: [
                        {required: true, message: '名字不能为空', trigger: 'blur'}
                    ],
                    phone: [
                        {required: true, message: '手机号不能为空', trigger: 'blur'}
                    ],
                    roleIds: [{type: "array", required: true, message: '角色不能为空', trigger: 'change'}]
                }
            }
        },
        created() {
            this.getRoles();
        },
        props: ['modal', 'modify'],
        watch: {
            modify: function () {
                let roleIds = [];
                this.modify.roleIds.split(',').forEach(e => {
                    roleIds.push(Number(e));
                })
                this.formItem = this.modify;
                this.formItem.roleIds = roleIds;
            }
        },
        methods: {
            getRoles() {
                this.$api.getRoles().then(res => {
                    if (res.code == 200) {
                        this.roleList = res.data;
                    }
                })
            },
            submit(name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        this.$api.saveRoles(this.formItem).then(res => {
                            if (this.formItem.id != '') {
                                this.$parent.cancel();
                            }
                            if (res.code == 200) {
                                this.$Message.success('保存成功');
                                this.$refs[name].resetFields();
                                this.$parent.getList();
                            } else
                                this.$Message.error(res.msg);
                        })
                    }
                })
            },
            cancel() {
                this.$parent.cancel()
            },
        }
    }
</script>

<style scoped>

</style>
